<template>
    <div>
      <el-card class="box-card" style="width: 50%; margin: 0 auto; ">
        服务
        <div id="bar" style="width: 100%; height: 400px"></div>
        <el-table
            :data="tableDdate"
            style="width: 400px"
            show-summary
        >
          <el-table-column
              prop="joindate"
              label="日期"
              width="200px">
          </el-table-column>
          <el-table-column
              prop="liang"
              label="服务"
              width="200px">
          </el-table-column>
        </el-table>
      </el-card>
    </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';
export default {
    data() {
        return {
          tableDdate:[],
          liangList:[],
          joindateList:[]
        }
    },
    methods:{
      initCount(){
        axios.get("http://localhost:8205/managecount/count/bar").then(res=>{
          this.liangList=res.data.liangList;
          this.joindateList=res.data.joindate;
          this.initrData(this.liangList,this.joindateList)
        })
      },
      initFindAll(){
        axios.get("http://localhost:8205/managecount/findAll").then(res=>{
          this.tableDdate=res.data.data;
        })
      },
      initrData(liangList,joindateList){
        let chartDom = document.getElementById('bar');
        let myChart = echarts.init(chartDom);
        let option;

        option = {
          xAxis: {
            type: 'category',
            data: joindateList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: liangList,
              type: 'bar'
            }
          ]
        };

        option && myChart.setOption(option);
      },
    },
    created() {
      this.initFindAll();
    },
    mounted() {
      this.initCount()
    }
}
</script>

<style scoped>

</style>
